<template>
	<view>
		<view class="face-container">
			<camera device-position="front" flash="off" class="camera" @error="error" v-if="showCamera">
				<cover-image src="../static/face_camera/bg.png" class="bg"></cover-image>
			</camera>
			<view class="image-container" v-if="showImage">
				<image mode="widthFix" class="photo" :src="photoPath"></image>
				<view class="cover"></view>
			</view>
		</view>
		<view class="desc">
			<!--校验人脸-->
			<block v-if="mode == 'verificate'">
				<image src="../static/face_camera/tips.png" mode="widthFix" class="tips"></image>
				<text>请把面部放在圆圈内</text>
				<text>拍摄脸部来确认身份</text>
			</block>
			<!--登录成功，录入人脸-->
			<block v-if="mode == 'create'">
				<image src="../static/face_camera/face.png" mode="widthFix" class="face"></image>
				<text>请把完整面部放在圆圈内</text>
				<text>拍摄脸部来保存身份识别数据</text>
			</block>
		</view>
		<!-- 查看登录的是否进行了面部识别 {{mode}} -->
		{{mode}}
		<button class="btn" @tap="confirmHandle">{{ mode == 'create' ? '录入面部信息' : '身份核实' }}</button>
	</view>
</template>

<script>
	let dayjs = require('dayjs');
	export default {
		data() {
			return {
				loginUser: {},
				// 你到底是做创建还是验证
				// create创建 verificate验证（必须是登录状态）
				// 在数据库表中增加一个录入字段：如果是1代表已录入，后续就是verificate
				// 在数据库表中增加一个录入字段：如果是0代表未录入，后续就是create
				mode: 'create',
				photoPath: '',
				showCamera: true,
				showImage: false,
				audio: null
			};
		},
	


		methods: {
			confirmHandle() {
				let that = this
				// 把音频全部停止
				that.audio.stop()
				// 开始获取摄像头对象
				let ctx = uni.createCameraContext()
				// 调用设备摄像头拍照
				ctx.takePhoto({
					// 设置图片的质量
					quality: "high",
					// 拍照成功的处理
					success: function(resp) {
						// 拿到拍照以后临时地址
						that.photoPath = resp.tempImagePath
						// 关闭拍照功能
						that.showCamera = false
						// 显示拍照图片
						that.showImage = true
						// 开始把拍照头像转换成base64地址。
						uni.getFileSystemManager().readFile({
							filePath: that.photoPath,
							encoding: "base64",
							success: function(resp) {
								console.log("开始执行人脸识别")
								// 因为腾讯云人脸识别库支持两种方式
								// 一种是https和http的图片web地址，第二种：base64
								let base64 = 'data:image:/png;base64,' + resp.data
								// 在腾讯云人脸识别库进行存储
								let url = "";
								if (that.mode == "create") {
									url = that.$api.createUserFaceModel;
								} else {
									url = that.$api.verificateUserFace;
								}
								console.log("base64=======>",base64)
								console.log("url-==============>",url)
								that.$request.post(url, {
									photo: base64
								}).then(resp => {
									if (that.mode == "create") {
										that.$toast("建档成功");
										// 因为更改数据库建档状态1.而前端的内容和缓存中其实还0
										that.loginUser.archive = 1;
										// 同步缓存一次
										that.$cache.set("user",that.loginUser);
									} else {
										that.$toast("认证成功");
									}
									// 跳转到熬首页
									setTimeout(() => {
										uni.switchTab({
											url: "/pages/index/index"
										})
									}, 300)
								})
							}
						})
					},
					
					
				})
			}
		},

		// 进行语音播报       只加载一次，监听页面加载
		onLoad: function(options) {
			let that = this
			// 这里就创建一个音频对象
			let audio = uni.createInnerAudioContext();
			that.audio = audio
			// 给音频一个播放文件
			audio.src = "/static/voice/voice_5.mp3"
			// 播放音频文件
			audio.play()
			// 给监听，播放完毕
			// audio.onEnded ((e)=>{
			// 	console.log("播放完毕了")
			// 	that.isTop = false;
			// })
		},
		// 监听页面显示。页面每次出现在屏幕上都触发
		onShow() {
			this.loginUser = this.$cache.get("user");
			//  获取你当前要人脸识别的状态是什么
			this.mode = this.loginUser.archive == 1 ? "verificate" : "create";
		},

		onHide: function() {
			if (this.audio != null) {
				this.audio.stop()
			}
		}
	};
</script>

<style lang="less">
	@import url('@/identity/face_camera/face_camera.less');
</style>
